<template>
  <div class="comment-card light-grey-bottom">
    <div class="comment-head">
      <div class="comment-user" @click="router.push({name:'user'})">
        <el-avatar :size="40" class="little-avatar"
                   src="https://tse4-mm.cn.bing.net/th/id/OIP-C.MVUrXzIVHvklsnbTk5XcywHaFd?w=260&h=191&c=7&r=0&o=5&dpr=1.3&pid=1.7"/>
        <span class="overflow-line-ignore overflow-line-normal">{{ props.comment.name }}</span>
      </div>
      <div class="comment-date">{{ props.comment.date }}</div>
    </div>
    <div class="comment-body">
      {{ props.comment.content }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {Comment} from "@/entity/article/view";
import router from "@/router";

interface CommentCard {
  comment: Comment;
}

// eslint-disable-next-line no-undef
const props = defineProps<CommentCard>();

</script>

<style scoped>
@media screen and (max-width: 1100px) {
  .overflow-line-normal {
    width: 150px !important;
  }
}

.comment-card {
  background: white;
  text-align: left;
  padding: 10px 25px 20px 25px;
}

.comment-head {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.comment-date {
  font-size: 14px;
  color: grey;
}

.comment-user {
  display: flex;
  align-items: center;
}

.comment-user:hover {
  cursor: pointer;
}

.comment-body {
  font-size: 14px;
}
</style>